<template>
<div>
  <div class="login-layout" v-show="isShow">
    <div :class="{ 'login-header': true, 'short-header': isLogin === 4 }">
      <div class="login-title">
        <div class="title">
          <span class="title-item" v-if="isLogin === 1">登录</span>
          <span class="title-item" v-else-if="isLogin === 4">登录验证</span>
          <span class="title-item" v-else>修改密码</span>
        </div>
      </div>

      <login-form-dev v-if="isLogin === 1 && LOGIN_STATUS === false" ref="LoginFormDev" @stepChange="stepChange"></login-form-dev>

      <short-form
        v-else-if="isLogin === 4"
        ref="ShortForm"
        @stepChange="stepChange"
        :loginInfo="loginInfo"
      ></short-form>

      <validate-phone :params="params" v-else-if="isLogin === 2" @stepChange="stepChange"></validate-phone>
      <edit-psw v-else @stepChange="stepChange" :params="params"></edit-psw>

    </div>
    <div class="login-footer" v-if="isLogin !== 4">
      <div>温馨提示：</div>
      <div>请妥善保管好自己的登录密码，每三个月请修改一次密码。</div>
    </div>
  </div>
</div>
</template>

<script>
import LoginFormDev from './modules/LoginFormDev'
import ValidatePhone from './modules/ValidatePhone'
import EditPsw from './modules/EditPsw'
import ShortForm from './modules/ShortForm'
import Vue from 'vue'
import { checkCode } from './js/login'
// import axios from 'axios'

export default {
  components: {
    LoginFormDev,
    ValidatePhone,
    EditPsw,
    ShortForm
  },
  data () {
    return {
      isLogin: 1, // 1-验证码登录 2-忘记密码 短信验证 3-忘记密码 修改密码 4-短信登录
      params: undefined,
      LOGIN_STATUS: false, // false:开发测试环境 true: 正式环境
      loginInfo: {},
      isShow: true,
      loading: null
    }
  },
  watch: {
    $route: function clearSelectionRow () {
      this.handleUrl()
    }
  },
  created () {
  },
  mounted () {
    this.handleUrl()
  },
  methods: {
    stepChange (val, params) {
      this.isLogin = val
      this.params = params
    },
    getLoginInfo (info) {
      this.loginInfo = info
    },
    async  getTokenByUrl () {
      const reg = new RegExp('(^|&)token=([^&]*)(&|$)') // 参数正则
      const codeReg = new RegExp('(^|&)code=([^&]*)(&|$)') // 参数正则
      const codeUrl = window.location.hash.split('?')[1]
      let r = null
      if (codeUrl) {
        this.isShow = false
        let params = null
        // 如果地址拼接token，先判断token是否符合规则，然后直接返回token进入系统
        if (codeUrl.includes('token')) {
          r = window.location.hash.split('?')[1].match(reg) // 匹配目标参数 匹配token
          if (r != null) {
            params = r[2]
          }
        } else if (codeUrl.includes('code')) {
          // 如果地址拼接 code，先判断code是否符合规则，
          // 第二：调后端接口，通过code获取token
          // 通过token进入系统
          r = window.location.hash.split('?')[1].match(codeReg) // 匹配目标参数 匹配code
          if (r != null) {
            params = r[2]
            if (params) {
              let token = await this.checkCode(params)
              params = token || ''
            }
          }
        }
        return params
      }
    },
    // 调用后端接口，将code传给后端
    async checkCode (code) {
      let res = await checkCode(code)
      // 通过code获取到token，进行存储
      if (res.code === 0) {
        // 如果token拿到了
        return res.data
      } else {
        this.$message.error(res.msg)
      }
    },

    async handleUrl () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // console.log(this.loading.close)
      const token = await this.getTokenByUrl()
      if (token) {
        const ACCESS_TOKEN = 'Access-Token'
        const oldToken = Vue.ls.get(ACCESS_TOKEN)
        if (oldToken !== token) {
          Vue.ls.set(ACCESS_TOKEN, token, 24 * 60 * 60 * 1000 * 50)
          this.$router.push({ path: '/' })
        }
        loading.close()
      }
      loading.close()
    },
    // 解锁用户
    unLockingUser (name) {
      const locking = this.$ls.get('User_Locking')
      if (locking[name]) {
        delete locking[name]
      }
      this.$ls.set('User_Locking', locking)
    }
  }
}
</script>
<style lang="less" scoped>
.login-layout {
  /deep/ input:-webkit-autofill,
  /deep/ input:-webkit-autofill:hover,
  /deep/ input:-webkit-autofill:focus,
  /deep/ input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  }
  /deep/ input {
    // background-color: transparent;
    filter: none !important;
  }
  .login-header {
    padding: 0 42px 0 50px;
    .login-title {
      margin-top: 36px;
      margin-bottom: 20px;
      .title {
        text-align: center;
        .title-item {
          font-size: 24px;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }
  .short-header {
    padding: 0;
    .login-title {
      margin-top: 96px;
      margin-bottom: 10px;
    }
  }
  /deep/ .ant-input {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #eaeaea;
    font-size: 14px;
  }
  /deep/ .ant-input:focus,
  /deep/ .ant-input:hover {
    box-shadow: none;
    border-bottom: 1px solid #008fff;
    &::placeholder {
      color: #008fff;
    }
  }
  /deep/ .has-error .ant-input {
    border-bottom: 1px solid #f5222d;
  }

  .login-footer {
    padding: 26px 20px 0;
    color: #666666;
  }
}
</style>
